import { getTruckOrderInfo } from "@/services/order/order_api";
import {
  ProForm,
} from "@ant-design/pro-components";
import dayjs from 'dayjs';
import {  Card,Descriptions  } from "antd";
import React, { useState, useEffect } from "react";
import { useIntl } from "umi";
import { OrderAddressVo,TruckOrderVo } from "../../types"




interface FormProps {
  value: TruckOrderVo;
}
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const InfoForm: React.FC<FormProps> = ({  value }) => {
  const [form] = ProForm.useForm<TruckOrderVo>();
  const intl = useIntl();
  const [validPeriodDateFor, setValidPeriodDateFor] = useState<string>('');
  const [validPeriodDateTo, setValidPeriodDateTo] = useState<string>('');
  // const [updateStatus, setUpdateStatus] = useState<boolean>(false);
  const [editStatus, setEditStatus] = useState<boolean>(false);
  const [tabChoice, setTabChoice] = useState<string>("INFO");


  useEffect(() => {
    if (value) {
      // console.log("customer:" + JSON.stringify(values));
      if (value.orderCode) {
        getTruckOrderInfo(value.orderCode).then((res) => {
          if (res.code !== 0) {
            const errorMessage =
              res.msg || intl.formatMessage({ id: "request.error.default" });
            throw new Error(errorMessage);
          }

          const orderData = res.data;
          setSendAddr(orderData.pickupAddress);
          setDeliveryAddr(orderData.deliveryAddress);
        });
      }
    }
    // form.setFieldsValue(values || {});
  }, [value]);


  const [sendAddr, setSendAddr] = useState<OrderAddressVo>();
  const [deliveryAddr, setDeliveryAddr] = useState<OrderAddressVo>();

// 使用示例
const pickUpAddress = (data: OrderAddressVo, title: string) => (
    <Card 
      title={title} 
      size="small" 
      headStyle={{ background: title === intl.formatMessage({ id: 'pages.order.info.shipper' }) ? '#f6ffed' : '#e6f7ff' }}
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.contact' })}>
          {data.oaFirstname} {data.oaLastname}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.company' })}>
          {data.oaCompany || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.location' })}>
          {data.oaCity},{data.oaState},{data.oaCountry}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.postcode' })}>
          {data.oaPostcode}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.address' })} span={2}>
          {[data.oaStreetAddress1, data.oaStreetAddress2, data.oaUnit].filter(Boolean).join(', ')}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.phone' })}>
          {data.oaTelphone} {data.oaTelphoneExtension && `(${intl.formatMessage({ id: 'pages.order.info.extension' })}: ${data.oaTelphoneExtension})`}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.email' })}>
          {data.oaEmail || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.pickupWindow' })}>
          {data.pickReadyDatetime && dayjs(data.pickReadyDatetime).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.businessHours' })}>
          {data.openTime || ''}-{data.closeTime || ''}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.additionalInfo' })}>
          {data.accessorials || ''}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );

  const deliveryAddress = (data: OrderAddressVo, title: string) => (
    <Card 
      title={title} 
      size="small" 
      headStyle={{ background: title === intl.formatMessage({ id: 'pages.order.info.shipper' }) ? '#f6ffed' : '#e6f7ff' }}
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.contact' })}>
          {data.oaFirstname} {data.oaLastname}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.company' })}>
          {data.oaCompany || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.location' })}>
          {data.oaCity},{data.oaState},{data.oaCountry}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.postcode' })}>
          {data.oaPostcode}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.address' })} span={2}>
          {[data.oaStreetAddress1, data.oaStreetAddress2, data.oaUnit].filter(Boolean).join(', ')}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.phone' })}>
          {data.oaTelphone} {data.oaTelphoneExtension && `(${intl.formatMessage({ id: 'pages.order.info.extension' })}: ${data.oaTelphoneExtension})`}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.email' })}>
          {data.oaEmail || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.deliveryHours' })}>
          {data.openTime || ''}-{data.closeTime || ''}
        </Descriptions.Item>
        {data.deliverWindowType && data.deliverWindowType === '1' && (
          <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.deliveryNoticePhone' })}>
            {data.deliverTelphone}
          </Descriptions.Item>
        )}
        {data.deliverWindowType && data.deliverWindowType === '2' && (
          <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.deliveryNoticeEmail' })}>
            {data.deliverEmail}
          </Descriptions.Item>
        )}
      </Descriptions>
    </Card>
  );

  const renderCard = (title: string) => (
    <Card 
      title={title}
      size="small"
      headStyle={{ 
        borderBottom: '1px solid #f0f0f0'
      }}
      bodyStyle={{ padding: 16 }}
      style={{ height: '100%', border: '1px solid #d9d9d9' }}
    >
      <Descriptions column={2} bordered size="small">
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.orderNo' })}>
          {value.orderCode || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.product' })}>
          {value.productCode || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.referenceNo' })}>
          {value.referenceNo || '-'}
        </Descriptions.Item>
        <Descriptions.Item label={intl.formatMessage({ id: 'pages.order.info.trackingNo' })}>
          {value.trackingNumber || '-'}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ 
        display: 'grid',
        gridTemplateColumns: '1fr',
        gap: 16
      }}>
        {renderCard(intl.formatMessage({ id: 'pages.order.info.orderInfo' }))}
      </div>
      
      <div style={{ 
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 16
      }}>
        {pickUpAddress(sendAddr || {}, intl.formatMessage({ id: 'pages.order.info.shipper' }))}
        {deliveryAddress(deliveryAddr || {}, intl.formatMessage({ id: 'pages.order.info.receiver' }))}
      </div>
    </div>
  );
};

export default InfoForm;
